
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>景点表</title>
    <link href="${pageContext.request.contextPath}/css/travel/travel_list.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/dist/layui/css/layui.css">
    <link href="${pageContext.request.contextPath}/dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js" rel="stylesheet"></script>
    <style>
        .row-top5 .item+.item{
            border-top: 1px solid #eee;
            padding-top: 30px;
            margin-top: 30px;
        }
    </style>
</head>
<body style="position: relative;">
<!--============================头部导航===============================================-->
<c:import url="/header/header.jsp"/>
<div class="container" style="margin: 0 auto">

    <div class="crumb">
        <div class="item">
            <a href="${pageContext.request.contextPath}/destination/destination_index.jsp">目的地</a>
            <em>></em>
        </div>

        <div class="item">
            <div class="drop">
                    <span class="hd">南京</span>
            </div>
            <em>></em>
        </div>

        <div class="item cur">
            <strong>杭州景点</strong>
        </div>
    </div>

    <!--==========================经典概述================-->
    <div class="row row-sunmary row-bg">
        <div class="wrapper">
            <h2 class="title">景点概述</h2>
            <div>
                <p style>
                    一般到杭州的人都不会错过西湖和西溪湿地，而西湖更是游览的重中之重。除此之外，杭州各个公园像璞玉一样将杭城包围，孤山赏梅、灵峰探梅、超山访梅三大赏梅圣地让杭州的冬天也如此绚烂，特别是孤山，因为西泠印社的存在，在青山绿水...
                    <!--                        <a style="color: #ff9d00;">展开全部</a>-->
                </p>
                <!--                    <span id="mdd_poi_desc" style="display: none;">-->
                <!--                        一般到杭州的人都不会错过西湖和西溪湿地，而西湖更是游览的重中之重。除此之外，杭州各个公园像璞玉一样将杭城包围，孤山赏梅、灵峰探梅、超山访梅三大赏梅圣地让杭州的冬天也如此绚烂，特别是孤山，因为西泠印社的存在，在青山绿水间又多了一重浓郁的文化气息。而太子湾公园一年不断的花展也成为杭州本地人小憩的地方。如果还有足够的时间，杭州周边的天目山、千岛湖、东明山森林公园，无一不是周末小游的好去处。-->
                <!--                    </span>-->
            </div>
        </div>
    </div>

    <div class="row row-top5" data-cs-p="必游景点">
        <div class="wrapper">
            <h2 class="title">必游景点</h2>
            <ul class="travel-sights-list">

<%--                    <div class="item clearfix">--%>
<%--                        <div class="info">--%>
<%--                            <div class="middle">--%>
<%--                                <h3>--%>
<%--                                    <a href="scenic_detail.jsp" target="_blank" title="西溪国家湿地公园">西溪国家湿地公园</a>--%>
<%--                                    <a href="" target="_blank" title="西溪国家湿地公园">--%>
<%--                                    <span class="rev-total">--%>
<%--                                        <em>2778</em>--%>
<%--                                        条点评--%>
<%--                                    </span>--%>
<%--                                    </a>--%>
<%--                                </h3>--%>
<%--                                <p>坐船漫游芦苇荡、寻迹《非诚勿扰》取景处</p>--%>
<%--                                <div class="links">--%>
<%--                                    这里还包含景点:--%>
<%--                                    <a href="" target="_blank">西溪湿地非诚勿扰拍摄点</a>--%>
<%--                                    <a href="" target="_blank">洪氏宗祠 </a>--%>
<%--                                    <a href="" target="_blank">十二生肖道 </a>--%>
<%--                                    <a href="" target="_blank">东关荷塘</a>--%>
<%--                                    <a href="" target="_blank">西溪湿地摇橹船 </a>--%>
<%--                                    <a href="" target="_blank">洪钟别宴</a>--%>
<%--                                    <a href="" target="_blank">成器·陶周末</a>--%>
<%--                                    <a href="" target="_blank">斯博特游泳俱乐部</a>--%>
<%--                                    <a href="" target="_blank">悦榕庄图书馆 </a>--%>
<%--                                    <a href="" target="_blank">西溪悦榕庄游泳池</a>--%>
<%--                                    <a href="" target="_blank">和源汇足浴(西溪天堂店) </a>--%>
<%--                                    <a href="" target="_blank">西溪湿地非诚勿扰拍摄点</a>--%>
<%--                                    <a href="" target="_blank">洪氏宗祠 </a>--%>
<%--                                    <a href="" target="_blank">十二生肖道 </a>--%>
<%--                                    <a href="" target="_blank">东关荷塘</a>--%>
<%--                                    <a href="" target="_blank">西溪湿地摇橹船 </a>--%>
<%--                                    <a href="" target="_blank">洪钟别宴</a>--%>
<%--                                    <a href="" target="_blank">成器·陶周末</a>--%>
<%--                                    <a href="" target="_blank">斯博特游泳俱乐部</a>--%>
<%--                                    <a href="" target="_blank">悦榕庄图书馆 </a>--%>
<%--                                    <a href="" target="_blank">西溪悦榕庄游泳池</a>--%>
<%--                                    <a href="" target="_blank">和源汇足浴(西溪天堂店) </a>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <div class="pic">--%>
<%--                            <a href="#" target="_blank" title="西溪国家湿地公园">--%>
<%--                                <div class="large">--%>
<%--                                    <img src="${pageContext.request.contextPath}/images/travel/travel1_1.jpeg" width="380px" height="270px">--%>
<%--                                </div>--%>

<%--                                <div>--%>
<%--                                    <img src="${pageContext.request.contextPath}/images/travel/travel1_2.jpeg" width="185" height="130">--%>
<%--                                </div>--%>
<%--                                <div>--%>
<%--                                    <img src="${pageContext.request.contextPath}/images/travel/travel1_3.jpeg" width="185" height="130">--%>
<%--                                </div>--%>
<%--                            </a>--%>
<%--                        </div>--%>
<%--                    </div>--%>

            </ul>

            <div class="travel_page"></div>

        </div>
    </div>
</div>

<script>

    var sigthsArea = $(".drop span").text();
    console.log(typeof (sigthsArea));
    console.log(sigthsArea);
    <%--window.location.href = "${pageContext.request.contextPath}/travelSight/" + sigthsArea;--%>
    getByPageTravelSights(sigthsArea);

    var currentPageNum ; // 该变量的作用  是为了 删除成功后，继续 分页查询 本页的 数据

    function getByPageTravelSights(pageNum) {
        $(".travel-sights-list").html("");//ul里面里的清空
        var pageInfo = "";  // 清空  中的页码信息

        if(typeof (pageNum) == "number")
            var url = "${pageContext.request.contextPath}/travelSight/" + sigthsArea + "/page/" + pageNum;
        else {
            var url = "${pageContext.request.contextPath}/travelSight/" + sigthsArea;
            pageNum = 1;
        }
        currentPageNum = pageNum;

        $.ajax({
           url : url,
           type : "get",
           dataType : "json",
           success:function (result) {
               console.log("result:" + result);
               console.log("result json:" + JSON.stringify(result));
               if (result.code == 200){
                   var travelSightsArray = result.data.list;
                   //数据渲染
                   for (var i = 0;i < travelSightsArray.length;i++){
                        var travelSightsName = travelSightsArray[i].travelSightsName;
                        var travelSightsPraiseCount = travelSightsArray[i].travelSightsPraiseCount;
                        var travelSightsMainImg = travelSightsArray[i].travelSightsMainImg;

                        var liEle = '    <div class="item clearfix">' +
                            '        <div class="info">' +
                            '            <div class="middle">' +
                            '                <h3>' +
                            '                    <a href="scenic_detail.jsp" target="_blank" title="西溪国家湿地公园">' + travelSightsName + '</a>' +
                            '                    <a href="" target="_blank" title="西溪国家湿地公园">' +
                            '                    <span class="rev-total">' +
                            '                        <em>'+ travelSightsPraiseCount +'</em>' + '点赞' +
                            '                    </span>' +
                            '                    </a>' +
                            '                </h3>' +
                            '                <p>坐船漫游芦苇荡、寻迹《非诚勿扰》取景处</p>' +
                            '                <div class="links">' +
                            '                    这里还包含景点:' +
                            '                    <a href="" target="_blank">西溪湿地非诚勿扰拍摄点</a>' +
                            '                    <a href="" target="_blank">洪氏宗祠 </a>' +
                            '                    <a href="" target="_blank">十二生肖道 </a>' +
                            '                    <a href="" target="_blank">东关荷塘</a>' +
                            '                    <a href="" target="_blank">西溪湿地摇橹船 </a>' +
                            '                    <a href="" target="_blank">洪钟别宴</a>' +
                            '                    <a href="" target="_blank">成器·陶周末</a>' +
                            '                    <a href="" target="_blank">斯博特游泳俱乐部</a>' +
                            '                    <a href="" target="_blank">悦榕庄图书馆 </a>' +
                            '                    <a href="" target="_blank">西溪悦榕庄游泳池</a>' +
                            '                    <a href="" target="_blank">和源汇足浴(西溪天堂店) </a>' +
                            '                    <a href="" target="_blank">西溪湿地非诚勿扰拍摄点</a>' +
                            '                    <a href="" target="_blank">洪氏宗祠 </a>' +
                            '                    <a href="" target="_blank">十二生肖道 </a>' +
                            '                    <a href="" target="_blank">东关荷塘</a>' +
                            '                    <a href="" target="_blank">西溪湿地摇橹船 </a>' +
                            '                    <a href="" target="_blank">洪钟别宴</a>' +
                            '                    <a href="" target="_blank">成器·陶周末</a>' +
                            '                    <a href="" target="_blank">斯博特游泳俱乐部</a>' +
                            '                    <a href="" target="_blank">悦榕庄图书馆 </a>' +
                            '                    <a href="" target="_blank">西溪悦榕庄游泳池</a>' +
                            '                    <a href="" target="_blank">和源汇足浴(西溪天堂店) </a>' +
                            '                </div>' +
                            '            </div>' +
                            '        </div>' +
                            '        <div class="pic">' +
                            '            <a href="#" target="_blank" title="西溪国家湿地公园">' +
                            '                <div class="large">' +
                            '                    <img src="${pageContext.request.contextPath}/images/travel/travel1_1.jpeg" width="380px" height="270px">' +
                            '                </div>' +
                            '                <div>' +
                            '                    <img src="${pageContext.request.contextPath}/images/travel/travel1_2.jpeg" width="185" height="130">' +
                            '                </div>' +
                            '                <div>' +
                            '                    <img src="${pageContext.request.contextPath}/images/travel/travel1_3.jpeg" width="185" height="130">' +
                            '                </div>' +
                            '            </a>' +
                            '        </div>' +
                            '    </div>' ;
                        $(".travel-sights-list").append(liEle);
                    }

                   //渲染页码信息
                   var total = result.data.total;
                   var pageNum = result.data.pageNum;
                   var pages = result.data.pages;
                   var prePage = result.data.prePage;
                   var nextPage = result.data.nextPage;

                   var pageInfo = '共有<span">' + total + '</span>个景点,' ;

                   if (result.data.hasPreviousPage){
                       pageInfo += ' <a href="javaScript:getByPageTravelSights(' + prePage +') " class="previous-page">上一页</a>,'
                   }
                   pageInfo += ' 当前是第<span>' + pageNum + '</span>页,';
                   if (result.data.hasNextPage){
                       pageInfo+=   '<a href="javascript:getByPageTravelSights(' + nextPage + ')">下一页</a>， ' ;
                   }
                   pageInfo += ' 共有<span>' + pages + '页</span>';

                   $(".travel_page").html(pageInfo);
                   $(".travel_page").css({
                       position:"relative",
                       top: "20px",
                       "text-align" : "center"
               });

               }
           }
        });
    }

</script>

</body>
</html>